<template>
	<div class="container">

		<div style="text-align: left;">
			<h3 class="text-center">部门查询</h3>
			<form action="#" method="post">
				<div class="form-group">
					<label>使用状态:</label>
					<div class="form-check form-check-inline">
						<label class="form-check-label">
							<input type="radio" class="form-check-input" name="useState" value="0" v-model="searchForm.useState">全部
						</label>
					</div>
					<div class="form-check form-check-inline">
						<label class="form-check-label">
							<input type="radio" class="form-check-input" name="useState" value="1" v-model="searchForm.useState">使用中
						</label>
					</div>
					<div class="form-check form-check-inline">
						<label class="form-check-label">
							<input type="radio" class="form-check-input" name="useState" value="9" v-model="searchForm.useState">已停用
						</label>
					</div>
				</div>
				<div class="form-group col-8">
					<label>部门编号:</label>
					<input type="text" class="form-control form-input" placeholder="请输入部门编号" v-model="searchForm.code" />
				</div>
				<div class="form-group">
					<el-button type="primary" color="green" :icon="Search" title="查询学生" style="width: 80px;"
						@click="serachData"></el-button>
				</div>
			</form>
		</div>
		<div style="text-align: right;">
			<el-button type="primary" :icon="Plus" title="创建学生" @click="openCreateModal"></el-button>
		</div>
		<div>
			<table class="table table-hover table-striped">
				<thead>
					<tr>
						<th>序号</th>
						<th>部门编号</th>
						<th>部门名称</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-if="0==rowCount">
						<td colspan="5" class="text-info text-center">未查询到任何部门数据</td>
					</tr>
					<tr v-else-if="-1==rowCount">
						<td colspan="5" class="text-error text-center">查询数据服务器异常</td>
					</tr>
					<tr v-else-if="rowCount>0" v-for="(dep,index) in tableData" :key="index">
						<td>{{index+1}}</td>
						<td>{{dep.code}}</td>
						<td>{{dep.name}}</td>
						<td>
							<span v-if="1==dep.useState" style="color: blue;">使用中</span>
							<span v-else-if="9==dep.useState" style="color: red;">已停用</span>
							<span v-else style="color: gold;">未知</span>
						</td>
						<td>
							<el-button type="info" :icon="ZoomIn" title="详情" color="green"
								@click="openDetailsModal(index)"></el-button>
							<el-button type="primary" :icon="Edit" title="修改" @click="openModifyModal(index)"></el-button>
							<el-button type="danger" :icon="Delete" title="删除" @click="deleteDepartment(index)"></el-button>
						</td>
					</tr>
					<tr v-else>
						<td colspan="5" class="text-error text-center">未知查询状态</td>
					</tr>
				</tbody>
				<tbody>
				</tbody>
			</table>
		</div>
		<!-- 自定义模态框开始 -->
		<Modal :is-visible="modalConfig.visible" @close-modal="closeModal">
			<Create v-if="1==modalConfig.type"></Create>
			<Modify v-else-if="2==modalConfig.type" :dep-id="depId"></Modify>
			<Details v-else-if="3==modalConfig.type" :dep-id="depId"></Details>
			<div v-else>
				<span style="color:red">模态框类型错误</span>
			</div>
		</Modal>
		<!-- 自定义模态框结束 -->
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		getCurrentInstance,
    onMounted
	} from 'vue'
	import {
		ZoomIn,
		Plus,
		Delete,
		Edit,
		Search
	} from '@element-plus/icons-vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import Create from './Create.vue';
	import Modify from './Modify.vue';
	import Details from './Details.vue';
	import api from '@api/index.js';
	//导入模态框
	import Modal from '../common/Modal.vue';
	const modifyModal = ref(null);
	const tableData = ref([]);
	const searchForm = reactive({
		code: '',
		name: '',
		useState: 0,
	});
	const depId = ref(0);
	const modalConfig = reactive({
		visible: false,
		//1:显示创建部门模态框;2:显示修改部门模态框;3:显示部门详情信息模态框
		type: 1
	});
	//计算记录行数
	const rowCount = computed(() => {
		return tableData.value ? tableData.value.length : -1;
	});
	//打开新建部门模态框
	const openCreateModal = () => {
		modalConfig.visible = true;
		modalConfig.type = 1;
	}
	//打开修改部门模态框
	const {
		proxy
	} = getCurrentInstance();
	const openModifyModal = (index) => {
		modalConfig.visible = true;
		modalConfig.type = 2;
		depId.value = tableData.value[index].depId
	}
	//打开部门详细信息模态框
	const openDetailsModal = (index) => {
		modalConfig.visible = true;
		modalConfig.type = 3;
		depId.value = tableData.value[index].depId
	}
	//删除部门
	const deleteDepartment = (index) => {
		let dep = tableData.value[index];
		ElMessageBox.confirm(`确定要删除部门【${dep.name}】吗?`, {
			confirmButtonText: '确定删除',
			cancelButtonText: '取消删除'
		}).then(async () => {
			console.info(dep)
			let response = await api.department.deleteById(dep.depId);
			let code = response.code;
			if (200 !== code) {
				ElMessage.warning(`删除失败【${response.message}】`);
				return;
			}
			let rows = response.data;
			if (1 == rows) {
				ElMessage.success({message:'删除成功',duration:1500,onClose:()=>{
					//删除成功后,重新加载页面数据
					serachData();
				}});
			} else if (0 == rows) {
				ElMessage.warning(`记录不存在或已被删除`);
			} else {
				ElMessage.warning(`删除部门,服务器返回未知的状态`);
			}
		}).catch(() => {
			console.info(`已取消删除部门【${dep.name}】`);
		});
	}
	//关闭模态框
	const closeModal = () => {
		modalConfig.visible = false;
	}
	//重新加载列表数据:因为添加或修改成功后,表数据变化了,需要重新查询数据
	const reloadData = () => {
		modalConfig.visible = false;
		serachData();
	}
	//暴露reloadData函数,子组件或父组件可以调用
	defineExpose({
		reloadData
	})
	//查询部门
	const serachData = () => {
		let params = searchForm;
		api.department.queryList(params).then((responseData) => {
			let code = responseData.code;
			if (200 !== code) {
				//失败业务,将数据设置null
				tableData.value = null
				return;
			}
			//判断是否查询到数据
			if (responseData.hasOwnProperty('data')) {
				//查询到数据
				tableData.value = responseData.data;
			} else {
				//未查询到数据
				tableData.value = [];
			}
		}).catch((error) => {
			//异常
			ElMessage.warning(error);
		});
	}
  onMounted(()=>{
    serachData();
  })
</script>

<style scoped>
	.form-input {
		display: inline !important;
		width: inherit !important;
	}
</style>